
import React, { Component } from 'react';
import {login} from '../utils/api'
import {request_collectlist_action} from '../store/actionCreator'
import {connect} from 'react-redux'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      phone:'',
      pass:'',
    }
  }
  login(){
     if(this.state.phone && this.state.pass){
      login(this.state).then((res)=>{
        console.log(res);
        if(res.data.code === 200){
          localStorage.setItem('token',res.data.token)
          localStorage.setItem('userid',res.data.userinfo.id)
          alert(res.data.msg)
          this.props.history.push('/index/home')
          this.props.collectlist();
        }else{
          alert(res.data.msg)
        }
      })
     }
  }
  handleChange(e){
    this.setState({
      [e.currentTarget.name]:e.currentTarget.value,
    })
  }
  render() {
    return (
      <div className='app'>
          <div className='login'>
            <div className='title'>登录页</div>
            <div className='input'>
              <input type="text" placeholder='输入账号' name='phone' defaultValue={this.state.phone} onChange={(e)=>{this.handleChange(e)}}/>
            </div>
            <div className='input'>
              <input type="password" placeholder='输入密码' name='pass' defaultValue={this.state.pass} onChange={(e)=>{this.handleChange(e)}}/>
            </div>
            <div className='input'>
              <input onClick={()=>{this.login()}} type="button" value="登录"/>
            </div>
          </div>
      </div>
    );
  }
}

export default connect(
    (state)=>{
      return{
           'collectlist':state.collectlist
      }
    },
    (dispatch)=>{
      return{
        collectlist(){
          dispatch( request_collectlist_action() )
        }
      }
    }
)(App);